<img src="{{ item.pic1 }}" style="width:100px ;height:100px ">
<span style="color: #0b6fa2">
 <h2>{{ item.itemName }}</h2>
</span>
<div style="border:3px solid coral">
    <div id="t" style="margin-top: 10px;height: 400px ;width:1000px;overflow-y: scroll"></div>
    <input id="input" type="text" style="height:37px;margin-left: 500px"/>
    <input class="layui-btn" type="button" value="发送" onclick="sendMsg()">
</div>
<script type="text/javascript" src="/static/js/jquery-3.3.1.js"></script>
<script type="text/javascript" src="/static/js/socket.io.js"></script>
<script>
     $(document).ready(function () {
        loadMsg();
        namespace = '/abcd';
        var socket = io.connect(location.protocol + '//' + document.domain + ':' + location.port + namespace);
        socket.on('response', function (res) {
            console.log(res);
            var msg = res.msg;
            var name = res.name;
            var item_id = res.item_id;
            var cur_id ={{ item.item_id}};
            if (msg && cur_id == item_id) {
                $("#t").append("<img src=" + name + " class='pic'>").append('&nbsp;&nbsp;&nbsp;').append(msg).append('<br/>');

                $("#t").append("<div style='height:20px;width: 200px' ></div>")
            }
        });
    });

    function loadMsg() {
        $.ajax({
            type: "GET",//方法类型
            dataType: "json",//预期服务器返回的数据类型
            url: "/user/loadMsg/{{ item.item_id }}",
            success: function (result) {
                var data = result.data;
                console.log(result.Code);
                console.log(data);
                var msgs = data.msgs;
                console.log(msgs)

                if (result.Code == 200) {
                    console.log(msgs[0].msg)
                    for (var i = 0; i < msgs.length; i++) {
                        var name = msgs[i].name;
                        var cur_id ={{ item.item_id }};
                        var item_id = msgs[i].item_id;
                        if (cur_id == item_id) {
                             $("#t").append("<img src=" + name + " class='pic'>").append('&nbsp;&nbsp;&nbsp;').append(msg).append('<br/>');

                             $("#t").append("<div style='height:20px;width: 200px' ></div>")
                        }
                    }
                }
                ;
                if (result.Code == 500) {
                    alert('加载失败！')
                }
                ;
            },
            error: function () {
                console.log("异常！")
            }
        });
    }
    function sendMsg() {
        namespace = '/abcd';
        var msg = $('#input').val();
        var item_id ={{ item.item_id }};
        var user1_id ={{ user.user_id }};
        var data = {'item_id': item_id, 'msg': msg, 'user1_id': user1_id};
        console.log(data)
        var socket = io.connect(location.protocol + '//' + document.domain + ':' + location.port + namespace);
        socket.on('connect', function () {
            if (msg) {
                socket.emit('my event', data);
            }
        });
    }
</script>